<template>
  <ve-histogram
    ref="ageAnalysis"
    :data="chartData"
    :height="'400px'"
    :judge-width="true"
    :settings="chartSettings"
    :extend="extendData"
    resizeable
  />
</template>
<script>
import veHistogram from 'v-charts/lib/histogram.common';
import { isNumber } from '@/utils/tools';
import { moneyFilter, numberTextFormat } from '@/filters/number';
export default {
  name: 'AgeAnalysis',
  components: { veHistogram },
  props: {
    originData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    xAxisRotate: {
      type: Number,
      default: 0
    }
  },
  data() {
    const xaxisLabel = {};
    if (this.xAxisRotate) {
      xaxisLabel.interval = 0;
      xaxisLabel.rotate = this.xAxisRotate;
    }
    return {
      chartData: null,
      chartSettings: {},
      totalData: 0,
      extendData: {
        legend: {
          show: false
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: (params) => {
              if (!isNumber(params)) {
                return params || '';
              } else {
                return moneyFilter(numberTextFormat(params, 1), false);
              }
            }
          },
          axisPointer: {
            snap: true
          }
        },
        xAxis: {
          axisLabel: xaxisLabel
        },
        series: {
          barWidth: 13,
          label: {
            position: 'top',
            show: true,
            formatter: (params) => {
              return parseInt(((params.data / this.totalData) * 10000)) / 100 + '%';
            }
          }
        },
        color: ['#406EFF', '#FD8546', '#F9C142', '#7254F6', '#FF6573', '#31CC9C']
      }
    };
  },
  created() {
    setTimeout(() => {
      this.handelData();
    }, 0);
  },
  methods: {
    handelData() {
      const columns = ['Name', '用户'];
      let rows = this.originData;
      rows = rows.filter(i => i.Name !== '总体');
      let totalData = 0;
      rows.forEach(i => {
        i['用户'] = i.Num;
        totalData += i.Num;
      });
      this.totalData = totalData;
      this.chartData = {
        columns,
        rows
      };
    },
    changeSize() {
      this.$nextTick(() => {
        this.$refs['ageAnalysis'].echarts.resize();
      });
    }
  }
};
</script>
<style lang="scss" scoped>

</style>
